<template>
  <div
    :id="id"
    :class="className"
    :style="boxStyles"
  />
</template>

<script>
import * as echarts from 'echarts'
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    backgroundColor: {
      type: String,
      default: 'transparent'
    }
  },
  data() {
    return {
      chart: null,
      data2: [
        {
          name: '下单量',
          color: 'primary',
          data: [
            {
              date: '2',
              value: 1220
            },
            {
              date: '',
              value: 2182
            },
            {
              date: '',
              value: 3191
            },
            {
              date: '',
              value: 1134
            },
            {
              date: '',
              value: 2150
            },
            {
              date: '',
              value: 3120
            },
            {
              date: '',
              value: 2110
            },
            {
              date: '',
              value: 125
            },
            {
              date: '',
              value: 145
            },
            {
              date: '',
              value: 4122
            },
            {
              date: '',
              value: 7165
            },
            {
              date: '',
              value: 822
            }
          ]
        },
        {
          name: '成交量',
          color: 'success',
          items: []
        },
        {
          name: '退款量',
          color: 'warning',
          items: []
        }
      ]
    }
  },
  computed: {
    boxStyles() {
      return { height: this.height, width: this.width }
    },
    labels() {
      if (this.data && this.data.length) {
        return this.data.map(item => {
          return item.name
        })
      }
      return []
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      this.chart.setOption({
        backgroundColor: this.backgroundColor,
        tooltip: {
          trigger: 'axis',
          textStyle: {
            fontStyle: 'normal',
            fontSize: 12
          }
        },
        legend: {
          bottom: 0,
          icon: 'rect',
          itemWidth: 15,
          itemHeight: 5,
          itemGap: 15,
          data: ['下单量', '成交量', '退款量'],
          textStyle: {
            fontSize: 12,
            color: '#999999'
          },
          itemStyle: {
            borderWidth: 0
          }
        },
        grid: {
          top: 30,
          left: 0,
          right: '0',
          bottom: 30,
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                opacity: 0.2
              }
            },
            axisLabel: {
              interval: 1
            },
            data: [
              '13:00',
              '13:05',
              '13:10',
              '13:15',
              '13:20',
              '13:25',
              '13:30',
              '13:35',
              '13:40',
              '13:45',
              '13:50',
              '13:55'
            ]
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '下单量',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(137,189,27)',
                borderColor: 'rgba(137,189,2,0.27)',
                borderWidth: 8
              }
            },
            data: [1220, 2182, 3191, 1134, 2150, 3120, 2110, 125, 145, 4122, 7165, 822]
          },
          {
            name: '成交量',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(0,136,212)',
                borderColor: 'rgba(0,136,212,0.2)',
                borderWidth: 8
              }
            },
            data: [1210, 2110, 8125, 7145, 2122, 1165, 122, 3220, 2182, 1191, 1324, 1350]
          },
          {
            name: '退款量',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(219,50,51)',
                borderColor: 'rgba(219,50,51,0.2)',
                borderWidth: 8
              }
            },
            data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
          }
        ]
      })
    }
  }
}
</script>
